@import "m_reset.scss";
@import url(http://at.alicdn.com/t/c/font_3631103_yztr8wxsy3q.css);

@function getvw($w){
    @return ($w  /750)*100 + vw
}

.wrap{
    header{
        nav{
            display: flex;
            padding: getvw(17) getvw(23) getvw(9) getvw(23);
            align-items: center;
            justify-content: space-between;
            button{
                border: 1px solid #ff9344;
                border-radius: getvw(20);
                background-color: #fff;
                width: getvw(123);
                height: getvw(57);
            }
            .search{
                position: relative;
                input{
                    width: getvw(265);
                    height: getvw(50);
                    border: 1px solid #ff9344;
                    border-radius: getvw(50);
                    font-size: getvw(24);
                    padding: 0 getvw(25);
                }
                i{
                    font-size: getvw(30);
                    color:#ff9344;
                    position: absolute;
                    right: getvw(24);
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
            .area{
                position: relative;
                select{
                    width: getvw(160);
                    height: getvw(55);
                    border: 1px solid #ff9344;
                    appearance: none;
                    padding-left: getvw(14);
                }
                i{
                    font-size: getvw(30);
                    color:#ff9344;
                    position: absolute;
                    right: getvw(11);
                    top: 50%;
                    transform: translateY(-50%);
                    pointer-events: none;
                }
            }
        }
        .banner{
            width: getvw(700);
            height: getvw(220);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 0 auto;
            
            .box{
                display: flex;
                flex-direction: column;
                width: getvw(148);
                height: getvw(150);
                img{
                    width: getvw(148);
                    height: getvw(149);
                }
                p{
                    margin-top: getvw(10);
                    text-align: center;
                }
            }
            .yuan{
                display: flex;
                align-items: center;
                align-items: flex-end;
                justify-content: center;
                justify-content: space-between;
                width: getvw(110);
                height: getvw(90);
                // background-color: pink;
                margin: 0 auto;
                
                .yuan_in{
                    width: getvw(18);
                    height: getvw(18);
                    background-color: #ff9344;
                    border-radius: 50%;
                    opacity: 0.5;
                    :nth-of-type(1){
                        background-color:#ff9344 ;
                    }
                    :hover{
                        background: #000;
                    }
                }
            }
        }
    }
    main{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        .nav{
            width: getvw(708);
            height: getvw(105);
            // background-color: pink;
            display: flex;
            
            justify-content:space-between ;
            .left{
                display: flex;
                align-items: center;
                font-size: getvw(29);
                p{
                    font-family: "微软雅黑";
                    position: relative;
                    left: getvw(10);
                    
                }
                .yundong{
                    width: getvw(47);
                    height: getvw(58);
                }
                .dianying{
                    width: getvw(53);
                    height: getvw(52);
                }
                img{
                    width: getvw(54);
                    height: getvw(42);
                    
                }
            }
            .right{
                display: flex;
                align-items: center;
                font-size: .32rem;
                p{
                    position: relative;
                    right: getvw(10);
                }
                img{
                    width: getvw(25);
                    height: getvw(26);
                }
            }
        }
        .box{
            width: getvw(708);
            height: getvw(133);
            // background-color: pink;
            display: flex;
            justify-content:space-between ;
            margin-top: getvw(20);
            margin-bottom: getvw(20);
            img{
                
                width: getvw(133);
                height: getvw(133);
            }
        }
    }
    footer{
        width: 100%;
        position: fixed;
        background-color: #fff;
        .box{
            width: getvw(652);
            height: getvw(107);
            margin: 0 auto;
            margin-top: getvw(80);
            // background-color: pink;
            display: flex;
            justify-content: space-between;
            .boxone{
                width: getvw(73);
                height: getvw(100);
                a{
                    color: #000;
                    text-decoration: none;
                }
                i{
                    
                    color: #ff9344;
                    font-size: getvw(73);
                }
                p{
                    font-size: .3467rem;
                    position: relative;
                    bottom: getvw(10);
                    left: getvw(10);
                }
            }
        }
    }
}